<template>
    
  <div>
      <div  id="chart" style="height: 400px">
          
      </div>
  </div>
  
</template>

<script>
import { mapActions,mapState } from 'vuex';
export default {
  mounted(){
      this.initEchart();
  },
  computed:{
      ...mapState('dataList',['dataList']),
  },
  created(){
      setInterval(() => {
          this.findData()
      }, 5000);
  },
  methods: {
    ...mapActions('dataList',['page_query']),
    findData(){
        this.page_query({page:1,pageSize:10}).then(()=>{
            let res = this.dataList.list.map((item)=>{
                // console.log(item.dead);
                return item.province;
            })
            let res2 = this.dataList.list.map((item)=>{
                return item.dead;
            })
            this.initEchart(res,res2);
            // this.initEchart();
        })
    },
    initEchart(res,res2) {
      echarts.init(document.getElementById("chart")).dispose();

      var myChart = echarts.init(document.getElementById("chart"));
      
      // 指定图表的配置项和数据
      var option = {
        xAxis: {
          type: "category",
          data: res,
          axisLabel:{
              formatter(val){
                  return val.split('').join('\n');
              }
          }
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: res2,
            type: "line",
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>